<template>
  <div class="site">
    <router-view />
    <nav>
      <ul class="tabbar">
        <router-link tag="li" to="/site-demo/site-a">site-1</router-link>
        <router-link tag="li" to="/site-demo/site-b">site-2</router-link>
      </ul>
    </nav>
  </div>
</template>

<script></script>

<style lang="less" scoped>
.site{
  height: 100vh;
  .tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li{
      width: 100%;
      height: 100%;
      padding: 0.3125rem;
      border-radius: 0.625rem;
      display: inline-block;
      list-style: none;
      cursor: pointer;
      line-height: 2.5rem;
      &.router-link-active{
        background-color: bisque;
        transition: all 0.5s;
      }
    }
  }
}
</style>
